<template>
  <div class="home">
  
    <div class="biaoti">  
      {{this.title}}
    </div>
    <div class="title">
      author:&emsp;{{author}}
    </div>
    <div class="title">
      type:&emsp;{{type}}
    </div>
    
    <div class="wenzhang">
      <markdown-preview class="mdEditor" :isPreview="true" v-model="papertxt"></markdown-preview>
    </div>  

    <div class="pinglun">
      <ol> 
        <h2>点赞数：{{this.likes_number}}<el-button type="primary" icon="el-icon-thumb" round @click="like">点赞</el-button></h2>
        <h3 style="color:#6E00FF">commit</h3>
        <h3>-----------------------------------------------------------------------------------------------------------------------------------</h3>
        <li class="commit">
          {{commit1}}
        </li>
        <li class="commit">
          {{commit2}}
        </li>
        <li class="commit">
          {{commit3}}
        </li>
        <li class="commit">
          {{commit4}}
        </li>
        <li class="commit">
          {{commit5}}
        </li>
      </ol>
      <div class="comm">
          添加评论<input v-model="commit" placeholder="留下您的想法" class="commi"><el-button type="primary" @click="update" round class="searchbot" >上传</el-button>
      </div>
      </div>
  </div>
</template>

<script>

import qs from "qs";
import MarkdownPreview from 'vue-meditor';

export default {
  name: 'HomeView',
  components: {
    MarkdownPreview
  },
  data(){
    return{
      blogid:'',
      likes_number:'',
      title:'超！2021',
      author:'zhangsan',
      type:'深度学习',
      papertxt:'jjjjjjjjjjjjjjjjjhahahahahahahahahahhahahahahahahhahahahhahahha\njjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj',
      commit:"",
      commit1:"",
      commit2:"",
      commit3:"",
      commit4:"",
      commit5:"",
    }
  },
  methods:{
    getParams () {
        
        this.blogid = this.$store.state.blog_id;
        //alert(this.$store.state.blog_id);
        
        console.log(this.$store.state.blog_id);
    },
    async alloc(){
        let {data} = await this.$axios.post('http://localhost:8080/selectBlog',{blog_id:this.blogid});
        this.data=data;
        console.log(this.data);
        this.papertxt=data.data.article;
        this.title=data.data.title;
        this.author=data.data.author;
        this.type=data.data.type1;
        this.likes_number=data.data.likes_number;
    },
    async alloccomment(){
        let {data} = await this.$axios.post('http://localhost:8080/showComment',{blog_id:this.blogid});
        this.data=data;
        console.log(this.data);
        this.commit1=data.result[0].content;
        this.commit2=data.result[1].content;
        this.commit3=data.result[2].content;
        this.commit4=data.result[3].content;
        this.commit5=data.result[4].content;
        /*this.papertxt=data.data.article;
        this.title=data.data.title;
        this.author=data.data.author;
        this.type=data.data.type1;*/
    },
    async like(){
        let {data} = await this.$axios.post('http://localhost:8080/thumbUp',{user_id:this.$store.state.user_id,blog_id:this.blogid});
        this.data=data;
        console.log(this.data);
        this.likes_number++;
    },
    update(){
        var inputted1 = this.commit;
        this.$axios.post('http://localhost:8080/commentBlog',{user_id:this.$store.state.user_id,blog_id:this.blogid,content:inputted1});
        this.$forceUpdate();
        alert("评论成功");
    },
  },
  created() {       //渲染前阶段
      this.getParams();
      this.alloc();
      this.alloccomment();
  }
}
</script>

<style lang="scss" scoped>
*{
  margin:10px;
  padding:0px;
}
.home{
  width:1450px;
  border:20px solid rgb(255, 255, 255);
  background:rgba(19, 152, 164, 0.37);
  margin:auto;
  border-radius: 40px;  /* 边框四个角的弧度  */
  .biaoti{
    font-family: "楷体", cursive, serif, sans-serif;
    height: 80px;
    text-align: center;
    margin:auto;
    font-size: 60px;
    color:rgb(154, 48, 126);
    font-weight: bold;
  }
  .comm{
    width:1000px;
    height:50px;
    background: rgba(255, 255, 255, 0);
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-weight: bolder;
    font-size: 25px;
  }
  .commi{
    width:500px;
    height:40px;
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-weight: bolder;
    font-size: 25px;
  }
  .title{
    background:rgb(255, 255, 255);
    font-family: "Segoe UI", cursive, serif, sans-serif;
    font-weight:400;
    font-size: 20px;
    color:rgba(63, 76, 250, 0.656);
    text-align: center;
    height: 30px;
    background:rgba(252, 222, 86, 0);
    margin:auto;
  }
  .wenzhang{
    border-radius: 10px;  /* 边框四个角的弧度  */
    background:rgba(252, 222, 86, 0);
    border:3px solid rgb(180, 68, 3);
    //border:2px solid rgba(96, 214, 234, 0.527);
    //font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    //font-weight: bolder;
    font-size: 30px;
    clear: both; /* 清除左右浮动 */
    width: 1400px; /* 必须定义宽度 */
    word-break: break-word; /* 文本行的任意字内断开 */
    word-wrap: break-word; /* IE */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP printers */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  }
  .pinglun{
    border-radius: 10px;  /* 边框四个角的弧度  */
    border:3px solid rgb(180, 68, 3);
    font-size: 20px;
    clear: both; /* 清除左右浮动 */
    width: 1400px; /* 必须定义宽度 */
    word-break: break-word; /* 文本行的任意字内断开 */
    word-wrap: break-word; /* IE */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP printers */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  }
  .commit{
    width:700px;
    
    background:rgba(252, 222, 86, 0);
    font-family: "Segoe UI", cursive, serif, sans-serif;
    font-weight:400;
    font-size: 20px;
    color:rgba(173, 44, 95, 0.656);
  }
  
}

</style>